<template>
  <div class="app-container">
    <div class="searchBox">
      <el-form :inline="true" :model="search" ref="searchForm">
        <el-form-item label="记录时间" prop="startTime">
          <el-date-picker
            v-model="search.startTime"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="选择日期"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="到：" prop="endTime">
          <el-date-picker
            v-model="search.endTime"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="选择日期"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="日志类型：" prop="levelString">
          <el-select v-model="search.levelString">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="操作类型：" prop="arg0">
          <el-select v-model="search.arg0">
            <el-option
              v-for="item in operOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item style="margin-top: -2px">
          <el-button type="primary" @click="searchQuery">查询</el-button>
          <el-button type="info" @click="search = {};searchQuery()">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <qm-table
      :data="query"
      keyProp="eventId"
      :formOptions="{ labelWidth: '120px' }"
      :menuOptions="{ width: 80 }"
      menuType="text"
      :showAdd="false"
      :showDelete="false"
      :showEdit="false"
      :showOrder="false"
      :showCheckbox="false"
      :showToolbar="false"
    >
      <qm-table-column
        field="levelString"
        fieldtype="enum"
        :enumOptions="[
          { key: '信息', value: 'INFO' },
          { key: '错误', value: 'ERROR' },
        ]"
        sortable
        width="100px"
      >日志类型</qm-table-column>
      <qm-table-column
        field="arg0"
        fieldtype="enum"
        :enumOptions="[
          { key: '登录日志', value: 'LOGIN' },
          { key: '退出日志', value: 'LOGOUT' },
          { key: '新增日志', value: 'CREATE' },
          { key: '编辑日志', value: 'EDIT' },
          { key: '删除日志', value: 'DELETE' },
        ]"
        sortable
        width="120px"
      >操作类型</qm-table-column>
      <qm-table-column field="timestmp" fieldtype="datetime" sortable width="180px">记录时间</qm-table-column>
      <qm-table-column field="arg2" sortable width="120px">操作人</qm-table-column>
      <qm-table-column field="formattedMessage" sortable show-overflow>日志内容</qm-table-column>

      <template v-slot:form="{ formData }">
        <el-row>
          <el-col :span="24">
            <el-form-item label="详细：" prop="formattedMessage">
              <el-input
                type="textarea"
                :autosize="{ minRows: 5, maxRows: 20}"
                v-model="formData.formattedMessage"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </template>
    </qm-table>
  </div>
</template>

<script>
import Controller from "@/libs/framework/controller";
export default class Instance extends Controller {
  onBeforeInit() {
    this.urls = {
      query: "/admin/loggingEvent/query",
      save: "/admin/loggingEvent/save",
      delete: "/admin/loggingEvent/delete",
      entity: "/admin/loggingEvent/getEntity",
    };
    this.urls.model = "/admin/loggingEvent/getListModel";
  }

  mixin() {
    return {
      data() {
        return {
          options: [
            {
              value: "",
              label: "全部",
            },
            {
              value: "INFO",
              label: "信息",
            },
            {
              value: "ERROR",
              label: "错误",
            },
          ],
          operOptions: [
            {
              value: "",
              label: "全部",
            },
            {
              value: "LOGIN",
              label: "登录日志",
            },
          ],
        };
      },
      methods: {},
    };
  }
}
</script>

<style scoped lang="scss">
</style>

